<template>
  <div class="card about-project art-custom-card">
    <div>
      <h1>欢迎您，{{ userStore.getUserInfo.nickname }}！</h1>
      <h2 class="box-title">推广链接
        <span class="level-name">
          （级别：{{ levelName }}）
        </span>
      </h2>
      <p> 客户使用您的邀请链接注册并完成订购后，您可以获取佣金奖励，最高可获得50%现金返佣.</p>
      <div class="step-detail">
        <div class="link-box">
          <el-input :model-value="props.topData.promotionUrl ? topData.promotionUrl : refLink" style="width: 800px"
            size="large" placeholder="请输入链接" disabled>
            <template #append>
              <span @click="handleCopy(topData.promotionUrl ? topData.promotionUrl : refLink)">复制链接</span>
            </template>
          </el-input>
        </div>
      </div>
    </div>
    <img class="right-img" src="https://image.lutongjiakao.com/system/f355dfa7794a4dae9ec7aaa8cb43106d.jpg"
      alt="draw1" />
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store/modules/user'
import AppConfig from '@/config'
import { computed } from 'vue'

const userStore = useUserStore()
const props = defineProps({
  topData: {
    type: Object,
    default: () => ({})
  }
})

const levelName = computed(() => props.topData.levelDetailsAo?.levelName)

const refLink = 'https://zhenxun.cn/recommend/dLuLNp4pwmEf'

const handleCopy = (e: any) => {
  navigator.clipboard.writeText(e).then(() => {
    ElMessage.success('复制成功')
  }, () => {
    ElMessage.error('复制失败')
  })
}

const systemName = AppConfig.systemInfo.name

const goPage = (url: string) => {
  window.open(url)
}
</script>

<style lang="scss" scoped>
.about-project {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  height: 240px;
  padding: 20px;

  .box-title {
    margin-top: 20px;

    .level-name {
      font-size: 14px;
      color: var(--main-color);
    }
  }

  h2 {
    margin-top: 10px;
    font-size: 20px;
    font-weight: 700;
    color: var(--art-gray-900) !important;
  }

  p {
    margin-top: 15px;
    font-size: 14px;
    color: var(--art-gray-600);
  }
}

.button-wrap {
  display: flex;
  flex-wrap: wrap;
  width: 600px;
  margin-top: 35px;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 240px;
  height: 50px;
  padding: 0 15px;
  margin: 0 15px 15px 0;
  font-size: 14px;
  color: var(--art-gray-800);
  cursor: pointer;
  background: var(--art-bg-color);
  border-radius: calc(var(--custom-radius) / 2 + 2px) !important;
  transition: all 0.3s;

  &:hover {
    box-shadow: 0 5px 10px rgb(0 0 0 / 5%);
    transform: translateY(-4px);
  }
}

.step-detail {
  flex: 1;
  margin-top: 20px;

  .step-title {
    font-size: 16px;
    font-weight: 500;
    color: #000;
    margin-bottom: 2px;

    .yellow-text {
      color: #F6BD16;
      font-weight: 600;
    }

    .plan-link,
    .plan-link-two {
      font-size: 16px;
      font-weight: 700;
      margin-left: 15px;
    }

    .plan-link {
      color: #3955de;
    }

    .plan-link-two {
      color: #2502f2;
    }
  }

  .step-desc {
    font-size: 14px;
    color: #8992b1;
    margin-bottom: 20px;
  }

  .link-box {
    display: flex;
    align-items: center;

    :deep(.el-input-group__append) {
      background-color: #e4efff;
      color: #3d55e1;
      cursor: pointer;
    }
  }
}

// 响应式设计 - iPad Pro及以下
@media screen and (max-width: $device-ipad-pro) {
  .about-project {
    height: auto;
  }

  .button-wrap {
    width: 470px;
    margin-top: 20px;
  }

  .btn {
    width: 180px;
  }

  .right-img {
    width: 300px;
    height: 230px;
  }
}

// 响应式设计 - iPad垂直及以下
@media screen and (max-width: $device-ipad-vertical) {
  .button-wrap {
    width: 100%;
  }

  .btn {
    width: 190px;
  }

  .right-img {
    display: none;
  }
}

// 响应式设计 - 手机端
@media screen and (max-width: $device-phone) {
  .about-project {
    padding: 0 15px;
  }

  .btn {
    width: 100%;
    margin-right: 0;
  }
}
</style>
